<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>404财富管家</title>
<meta name="keywords" content="财富管家" />
<meta name="description" content="财富管家" />
<link rel="shortcut icon" th:href="@{/images/littlelogo.png}">
<link rel="icon" th:href="@{/favicon.ico}" mce_href="/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/css/user.css}"/>
<link th:href="@{/css/iconfont/RjdaoIcon.css}" rel="stylesheet" type="text/css">d
<link th:href="@{/css/index.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/highcharts.js}"></script>
<script th:src="@{/js/layer/layer.js}" charset="utf-8"></script>


<!--
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://img.hcharts.cn/highcharts/themes/grid-light.js"></script>
-->
<style type="text/css">
	.main-box #info span{
		font-size: 20px;
	}
	.main-box #info input{
		font-size: 20px;
	}
	.main-box #icon {
		margin-left: 100px;
	}
	.main-box hr{
		margin-top: 50px;
		height: 1px;
		border: none;
		background-color: #D5D5D5;
	}
	.main-box #info{
		margin-top: 50px;
	}
	
	.getmessage {

background: #3498db;
text-align: center;
position: relative;
border-radius:5px;//圆角矩形属性
font-size: 20px;
color: #fff;

	}
	
</style>
</head>

<body>

<!----header s---->
<div class="topnav">
	<div class="mainw w">
		<div class="l-txt">欢迎致电：400-1234-123 &nbsp;&nbsp; 服务时间：08:30-17:30（工作日）</div>

		<a th:href="@{/information/xinxi2}" class="dh">帮助中心</a>
		<a th:href="@{/information/xinxi3}" class="dh">新手指引</a>

	</div>
</div>
<header>
	<div class="hmain w">
		<a th:href="@{/index}" class="logo"><img th:src="@{/images/logo.png}"></a>
		<a th:href="@{/userCenter/logout}" class="ubut">退出</a>
		<a th:href="@{/userCenter/index}" class="ubut" style="padding:0 15px;background-color: #C9302C;color: white;">个人中心<span><dl th:text="${'我的资产:'+user.balance}">我的资产：2830.00</dl></span></a>
		<nav>
			<a th:href="@{/index}" >首页</a>
			<a th:href="@{/invest/list}">我要投资</a>
			<a th:href="@{/borrowCenter/index}">我要借贷</a>
			<a th:href="@{/zhongchou/list}">众筹中心</a>
			<a th:href="@{/information/xinxi1}">信息披露</a>
		</nav>
	</div>
</header>
<!----header e---->



<!---user top s---->
<div class="user-top">

	<div class="userinfo">
    
    	<a href="" class="portrait" style="margin-top:10px;"><em>编辑头像</em><img th:src="@{/images/user-portrait.jpg}"></a>
		<div class="minfo" style="margin-top:30px;">
			<div class="it"><dl>ID：</dl><span class="mr1" th:text="${user.id + 10000}">633748</span> <dl>用户名：</dl><span th:text="${user.tell}">xiezhengyi</span></div>
			<div class="it">
				<dl>绑定手机号：</dl><span th:text="${user.tell}">187****6613</span>
				<a class="ml1" title="手机" th:href="@{/userCenter/safe}"><i class="icon-0566"></i></a>
				<a th:href="@{/userCenter/account}" class="ml1" title="设置"><i class="icon-0421"></i></a>
			</div>
		</div>
        
        <div class="capital">
        	<dl>我的总资产</dl><em th:text="${user.balance}">200263.00</em>
        </div>
        <div class="capital2">
        	<a href="javascript:void(0);" onclick="recharge()" class="ti">充值</a>
        	<a href="javascript:void(1);" onclick="forward()" class="ti">提现</a>
        </div>
        
    </div>
    
    <div class="nav">
		<a th:href="@{/userCenter/index}" class="l"><i class="icon-0101" ></i><span >我的项目</span></a>
		<a th:href="@{/userCenter/loan}" class="l"><i class="icon-0101" ></i><span >我的借贷</span></a>
		<a th:href="@{/userCenter/Crowd}" class="l"><i class="icon-0941"></i><span>我的众筹</span></a>
		<a th:href="@{/userCenter/transaction}" class="l"><i class="icon-0423"></i><span>交易记录</span></a>
		<a th:href="@{/userCenter/account}" class="l"><i class="icon-0841"></i><span>账户设置</span></a>
		<a th:href="@{/userCenter/safe}" class="l"><i class="icon-0282"style="color: orange;"></i><span  style="color: orange;">安全设置</span></a>
		<a th:href="@{/userCenter/logout}" class="r"><i class="icon-0735"></i><span>退出</span></a>
    </div>
    
</div>

<!---user top e---->
<div class="u-main">
	<div>
		<span style="font-size: 30px;">安全设置</span>
	<!--	<div class="progress progress-striped active" style="width: 300px;float: right;margin-right: 30px;margin-top: 5px;">
			<div class="progress-bar progress-bar-success" role="progressbar"
				 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
				 style="width: 60%;">
				<span >60% 完成</span>
			</div>
		</div>-->
	</div>
	<hr style="color: grey;border-width: 2px;"/>
	<div class="main-box">
		<div style="margin-top: 20px;">
			<div id="info" >
				<span>手机验证：</span>
				<i id="icon" class="icon-0969"style="color: limegreen;"></i>
				<span>已认证</span>
				<span style="font-size: 18px;margin-left: 50px;" th:text="${user.tell}">137******111</span>
				<a class="r" style="color: royalblue;font-size: 18px; " href="javascript:void(0);" onclick="modifymobel()">修改</a>
				<a class="r" style="display:none;color: royalblue;font-size: 18px; " href="javascript:void(0);" onclick="mobel()">取消修改</a>
				<div class="mobel-checkbox" style="display:none; width: 1000px;border: groove;border-color:#F9F9F9;background-color:#F9F9F9;margin: auto;margin-top: 50px;">
					<form>
						<div style="margin-left: 320px;">
							<i class="icon-0241" style="color: #67B168"></i>
							<span style="font-size: 30px;">验证原手机号码</span>
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">原手机号码：</span>
							<span style="font-size: 20px;">137*******111</span>
							<button class="getmessage" style="font-size: 20px;">获取验证码</button>
							<span style="font-size: 15px;color: #C0C0C0;">如果验证码没收到，可重新获取</span>
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">短信验证码：</span>
							<input type="text" placeholder="请输入验证码"/>
							<br /><br />
							<i class="icon-0241" style="color: #67B168"></i>
							<span style="font-size: 30px;">验证新手机号码</span>
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">新手机号码：</span>
							<input type="text" placeholder="请输入新手机号" />
							<br /><br />
							<button class="getmessage" style="margin-left:130px;font-size: 20px;"value="获取验证码">获取验证码</button>
							<span style="font-size: 15px;color: #C0C0C0;">如果验证码没收到，可重新获取</span>
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">短信验证码：</span>
							<input type="text" placeholder="请输入验证码"/>
							<br /><br />
							<div style="margin-left: 150px;">
								<button type="submit" value="提交" onclick="mobel()" style="font-size: 20px;width:100px;background-color: #C4E3F3;border-radius: 10px;"/>提交
							</div>
							<br /><br />
						</div>
					</form>
				</div>
				
			</div>
			<hr />
			<div id="info" >
				<span>身份证号：</span>
				<i id="sficon" class="icon-0767"style="color: red;margin-left: 100px;"></i>
				<span id="sfname">待审核</span>
				<span style="font-size: 18px;margin-left: 50px;" id="sfnum" ></span>
				<a class="r" style="color: royalblue;font-size: 18px; " href="javascript:void(0);" onclick="IDcard()">申请</a>
				<a class="r" style="display:none;color: royalblue;font-size: 18px; " href="javascript:void(0);" onclick="IDcard()">取消申请</a>
				<div class="idCard-checkbox" style="display:none; width: 1000px;border: groove;border-color:#F9F9F9;background-color:#F9F9F9;margin: auto;margin-top: 50px;">
					<form th:action="@{/userCenter/saveIDcard}" method="post">
						<div style="margin-left: 320px;">
							<div style="width:360px;text-align: center;">
								<span style="font-size: 30px;">身份验证</span>
							</div>

							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">真实姓名：</span>
							<input type="text" name="name" placeholder="请输入真实姓名" />
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">身份证号：</span>
							<input type="text" name="IDcard" placeholder="请输入身份证号"/>
							<br /><br />
							<div style="margin-left: 150px;">
								<button type="submit" value="提交" style="font-size: 20px;width:100px;background-color: #C4E3F3;border-radius: 10px;"/>提交
							</div>
							<br /><br />
						</div>
					</form>
				</div>
			</div>
			<hr />
			<div id="info" >
				<span>密码验证：</span>
				<i id="icon" class="icon-0969"style="color: limegreen;"></i>
				<span>已认证</span>
				<span style="font-size: 18px;margin-left: 50px;">上次登录时间：</span>
				<span style="font-size: 18px; " th:text="${#dates.format(user.lastlogintime, 'yyyy-MM-dd HH:mm:ss')}">xxxxxxxx</span>
				<a class="r" style="color: royalblue;font-size: 18px; " href="javascript:void(0);" onclick="modifyPwd()">修改</a>
				<!--<a class="r" style="display:none;color: royalblue;font-size: 18px; " href="javascript:void(0);" onclick="passwordcheck()">取消修改</a>-->
				<!--<div class="password-checkbox" style="display:none; width: 1000px;border: groove;border-color:#F9F9F9;background-color:#F9F9F9;margin: auto;margin-top: 50px;">
					<form>
						<div style="margin-left: 320px;">
							
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">原密码：</span>
							<input type="text" placeholder="请输入原密码"/>
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">新密码：</span>
							<input type="text" placeholder="请输入新密码"/>
							<br /><br />
							<span style="font-size: 20px;color: red;">*</span><span style="font-size: 20px;">新密码：</span>
							<input type="text" placeholder="请输入一致的新密码" />
							<br /><br />
							<div style="margin-left: 150px;">
								<button type="submit" value="提交" onclick="passwordcheck()" style="font-size: 20px;width:100px;background-color: #C4E3F3;border-radius: 10px;"/>提交
							</div>
							<br /><br />
						</div>
					</form>
				</div>-->
			</div>
			<hr />
			
		</div>
	</div>
</div>
<!--修改密码 s-->
<script type="text/javascript">
    function modifyPwd() {
        //页面层
        layer.open({
            type: 2,
            title: '用户修改密码',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '400px'], //宽高
            content: contextPath + '/userCenter/modifyPwd?id=' + userId
        });
    }
</script>
<!--修改密码 e-->

<!--修改手机 s-->
<script type="text/javascript">
    function modifymobel() {
        //页面层
        layer.open({
            type: 2,
            title: '用户修改手机',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '400px'], //宽高
            content: contextPath + '/userCenter/modifymobel?id=' + userId
        });
    }
</script>
<!--修改手机 e-->

<!--通用值 s-->
<script th:inline="javascript">
    var namevalue = [[${userinfo.name}]];
    var IDcardvalue = [[${userinfo.IDcard}]];
    var status  = [[${userinfo.status}]];
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    var userId = [[${user.id}]];//用户id
</script>
<!--通用值 e-->

<!--身份验证 s-->
<script type="text/javascript">
	window.onload=function () {
		if(status == 1){
            document.getElementById("sfname").innerText="审核中";
            document.getElementById("sfnum").innerText=IDcardvalue;
            document.getElementsByClassName("r")[3].onclick=" ";
            document.getElementsByClassName("r")[3].style.opacity="0.2";
		}else if(status == 2){
            document.getElementById("sficon").setAttribute("class","icon-0969");
            document.getElementById("sficon").style.color="limegreen";
            document.getElementById("sfname").innerText="已认证";
            document.getElementById("sfnum").innerText=IDcardvalue;
            document.getElementsByClassName("r")[3].onclick=" ";
            document.getElementsByClassName("r")[3].style.opacity="0.2";
		}



	}
</script>
<!--身份验证 e-->

<script type="text/javascript">
	function mobel(){
		var a = document.getElementsByClassName("mobel-checkbox")[0].style.display;
		if(a == "none"){
			document.getElementsByClassName("mobel-checkbox")[0].style.display="block";
			document.getElementsByClassName("idCard-checkbox")[0].style.display="none";
			document.getElementsByClassName("r")[2].style.display="block";
			document.getElementsByClassName("r")[1].style.display="none";
		}else if(a == "block"){
			document.getElementsByClassName("mobel-checkbox")[0].style.display="none";
			document.getElementsByClassName("r")[1].style.display="block";
			document.getElementsByClassName("r")[2].style.display="none";
		}
	}
	
	function IDcard(){
		var a = document.getElementsByClassName("idCard-checkbox")[0].style.display;
		if(a == "none"){
			document.getElementsByClassName("mobel-checkbox")[0].style.display="none";
			document.getElementsByClassName("idCard-checkbox")[0].style.display="block";
			document.getElementsByClassName("r")[4].style.display="block";
			document.getElementsByClassName("r")[3].style.display="none";
		}else if(a == "block"){
			document.getElementsByClassName("idCard-checkbox")[0].style.display="none";
			document.getElementsByClassName("r")[3].style.display="block";
			document.getElementsByClassName("r")[4].style.display="none";
		}
	}

</script>


<!--充值页面 s-->
<script type="text/javascript">
    function recharge() {
        //页面层
        layer.open({
            type: 2,
            title: '充值中心',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '470px'], //宽高
            anim:4, //0-6的动画形式，-1不开启
            content: contextPath + '/userCenter/recharge?id=' + userId
        });
    }
</script>
<!--充值页面 e-->
<!--提现页面 s-->
<script type="text/javascript">
    function forward() {
        //页面层
        layer.open({
            type: 2,
            title: '提现中心',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '340px'], //宽高
            anim:4, //0-6的动画形式，-1不开启
            content: contextPath + '/userCenter/forward?id=' + userId
        });
    }
</script>	
<!--提现页面 e-->

<!---footer s--->
<footer>
	<div class="fmain w">
    	<div class="fm-top">
        	<div class="left">
            
            	<div class="ilist">
                	<h1>联系我们</h1>
                    <div class="t">客服电话</div>
                    <div class="tel">400-1234-123</div>
                    <div class="t">邮箱：quanminsat@163.com</div>
                </div>

				<div class="ilist">
					<h1>关于我们</h1>
					<a th:href="@{/information/jianjie}">公司简介</a>
					<a th:href="@{/information/gonggao}">最新公告</a>
					<a th:href="@{/information/join_us}">加入我们</a>
				</div>
            </div>
            <div class="right">
            	<div class="ewm" style="margin-left:20px;"><img th:src="@{/images/gzh.jpg}"><span>关注公众号</span></div>
            </div>
        </div>
          <div class="fm-bot" style="text-align: center;">
        	<span>&copy; 2018 &nbsp;全民科技有限公司 &nbsp;京ICP备：123456789号 </span>
        	<br />
            <dl>市场有风险 投资需谨慎</dl>
        </div>
    </div>
</footer>
<!---footer e--->


</body>
</html>
